<template>
  <div>
    <div class="title">
      <div class="hot"><p>国内数据</p></div>
      <div class="time">截止至北京时间 {{time}}</div>
    </div>
    <div class="content">
      <div class="item">
        <van-row>
          <van-col span="8">
            <p>较昨日<span class="num">{{data.currentConfirmedIncr | num}}</span></p>
            <p class="big num">{{data.currentConfirmedCount |time}}</p>
            <strong>现存确诊</strong>
          </van-col>
          <van-col span="8">
           <p>较昨日<span class="num">{{data.suspectedIncr | num}}</span></p>
            <p class="big num">{{data.suspectedCount |time}}</p>
            <strong>境外输入</strong>
          </van-col>
          <van-col span="8">
          <p>较昨日<span class="num">{{data.seriousIncr | num}}</span></p>
            <p class="big num">{{data.seriousCount |time}}</p>
            <strong>现存无症状</strong>
          </van-col>
          <van-col span="8">
          <p>较昨日<span class="num">{{data.confirmedIncr | num}}</span></p>
            <p class="big num">{{data.confirmedCount |time}}</p>
            <strong>累计确诊</strong>
          </van-col>
          <van-col span="8">
          <p>较昨日<span class="num">{{data.deadIncr | num}}</span></p>
            <p class="big num">{{data.deadCount |time}}</p>
            <strong>累计死亡</strong>
          </van-col>
          <van-col span="8">
          <p>较昨日<span class="num">{{data.curedIncr | num}}</span></p>
            <p class="big num">{{data.curedCount |time }}</p>
            <strong>累计治愈</strong>
          </van-col>
        </van-row>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
        time:''
    };
  },
  filters:{
 time(val){
            if(!val) return '';
            //1. 转字符串 字符串处理 2. toLocaleString() 
            return val.toLocaleString();
        }
  },
  props: {
    data: Object,
  },
  created() {
    console.log("对象数据", this.data);
    this.time=moment(this.data.modifyTime
).format('YYYY-MM-DD HH:mm:ss')
  },
 
};
</script>
/**
            currentConfirmedCount 现存确诊
            confirmedCount  累计确诊
            suspectedCount  累计境外输入人数
            curedCount    累计治愈人数
            deadCount   累计死亡人数
            seriousCount  现存无症状人数
            suspectedIncr  新增境外输入人数
            currentConfirmedIncr   相比昨日现存确诊人数
            confirmedIncr  相比昨日累计确诊人数
            curedIncr   相比昨日新增治愈人数
            deadIncr  相比昨日新增死亡人数
            seriousIncr 相比昨日现存无症状人数

              modifyTime 时间
             
             */

<style lang="less" scoped>
.title {
  margin-top: 0.4rem;
  padding: 0.2rem 0.32rem 0;
  background-color: #fff;
  height: 1rem;
  .hot {
    position: relative;
    &::before {
      content: "";
      width: 0.06rem;
      height: 0.32rem;
      background: #4169e2;
      position: absolute;
      top: 0.08rem;
    }
    p {
      margin-left: 0.4rem;
      font-weight: 700;
      font-size: 0.32rem;
    }
  }
  .time {
    font-size: 0.24rem;
    margin-top: 0.1rem;
    color: #666;
  }
  
}
.content {
  padding: 0.32rem;
  height: 3rem;
  background-color: #fff;
  font-size: .24rem;
  .big{
      font-size: .4rem;
      font-weight: 700;
  }
  .item {
    text-align: center;
    padding: 0.2rem;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    border-radius: 0.1rem;
  }
  .van-col {
    margin-bottom: 0.2rem;
  }
  .van-col:nth-child(1) {
    .num {
      color:rgb(247, 76, 49); 
    }
  }
  .van-col:nth-child(2) {
    .num {
      color:rgb(247, 130, 7); 
    }
  }
  .van-col:nth-child(3) {
    .num {
      color:rgb(162, 90, 78) ;
    }
  }
  .van-col:nth-child(4) {
    .num {
      color: rgb(174, 33, 44) ;
    }
  }
  .van-col:nth-child(5) {
    .num {
      color: rgb(93, 112, 146) ;
    }
  }
  .van-col:nth-child(6) {
    .num {
      color:rgb(40, 183, 163) ;
    }
  }
}
</style>>
